<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性 ：【微调：文字或者图片】
			 margin使用问题1： 自使用居中，建议使用div,套块元素，行块元素，行内元素
			 使用问题2：行元素，上下外边距失效  右左外边距
			 行元素：不可以设置高宽【高--不可以动上下】，在一行内显示【宽--可以左右】
			 使用问题3：垂直外边距
			 使用问题4：垂直外边距
			 */
			img{
				border: 1px solid red;
				/* margin 1个属性值: 顺时针 上 右 下  左 */
				margin: 100px;
				/* margin 2个属性值: 顺时针 上下    右左 */
				margin: 10px 200px;
				/* 常用：盒子自适应居中 ----失效 
				行内块：可以设置高宽，在一行内显示,无法居中
				margin使用问题1  自适应居中，必须设置宽度
				*/
			   width: 200px;
				margin: 0 auto;
				/* margin 3个属性值: 顺时针 上   右左  下*/
				/* margin: 100px 200px 300px; */
				/* margin 3个属性值: 顺时针 上   右 下   左*/
				mar gin: 100px 200px 300px 400px;
			}
			h1{
				/* 块元素：可以设置高宽，不在一行内显示,无法居中 ，内置文本
				text-align:center;
				*/
				/* 常用：盒子自适应居中 ----设置宽度 */
				width: 100%;
				border: 1px solid red;
					margin: 1000px 200px;
					text-align:center;
			}
			span{
				/* 行内元素：不可以设置高宽【高--不可以动上下】，在一行内显示【宽--可以左右】,无法居中 ，内置文本
				text-align:center;
				*/
				/* 常用：盒子自适应居中 ----*/
					width: 100%;
					border: 1px solid red;
						margin: 100px 200px;
							text-align:center;
			}
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div></div>
		<!-- 框模型，盒子模型：四个部分组成：
	                              外边距：边框以外四周，叫做外边距
								  margin属性
								  边框：--
								  内边距：边框以内 与内容 之间距离，叫做内边距
								  内容：块，行，行内元素本身宽高
		所有元素存在于框模型中 -->
		<h1>块级元素</h1>
		<img src="img/圣诞.png" width="300px" height="300px" alt="圣诞" />
	<span>行内元素：圣诞</span>
	</body>
</html>